<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.StatisticsDialogVisible"
           @cancel="closeDialog"
           @ok="closeDialog"
           :modal-title="modalTitle"
           model-size="large">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <page-decorator>
            <div class="row">
                <h3>昨日关键指标</h3>
                <div class="col-xs-12">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="widget navy-bg p-lg text-center">
                                <div class="m-b-md">
                                    <h3 class="font-bold no-margins">
                                        新增关注人数
                                    </h3>
                                    <h1 class="m-xs">{{dataElement.new.number}}</h1>

                                    <small v-html="dataElement.new.day">
                                    </small>   <br/>
                                    <small v-html="dataElement.new.week">
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="widget navy-bg p-lg text-center">
                                <div class="m-b-md">
                                    <h3 class="font-bold no-margins">
                                        取消关注人数
                                    </h3>
                                    <h1 class="m-xs">{{dataElement.cancel.number}}</h1>

                                    <small v-html="dataElement.cancel.day">
                                        {{dataElement.cancel.day}}
                                    </small>   <br/>
                                    <small v-html="dataElement.cancel.week">
                                       {{dataElement.cancel.week}}
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="widget navy-bg p-lg text-center">
                                <div class="m-b-md">
                                    <h3 class="font-bold no-margins">
                                        净增关注人数
                                    </h3>
                                    <h1 class="m-xs">{{dataElement.growth.number}}</h1>
                                    <small v-html="dataElement.growth.day">
                                    </small>   <br/>
                                    <small v-html="dataElement.growth.week">
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="widget navy-bg p-lg text-center">
                                <div class="m-b-md">
                                    <h3 class="font-bold no-margins">
                                        累计关注人数
                                    </h3>
                                    <h1 class="m-xs">{{dataElement.cumulative.number}}</h1>
                                    <small v-html="dataElement.cumulative.day">
                                    </small>   <br/>
                                    <small v-html="dataElement.cumulative.week">
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h3>趋势图</h3>
                <div class="col-xs-12">
                    <div class="row">
                    <div id="chartColumn" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div>
        </page-decorator>

    </modal>


</template>

<script>
    import echarts from 'echarts'

    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                dataElement:{
                    "new":{"number":'--',"day":'--',"week":'--'},
                    "cancel":{"number":'--',"day":'--',"week":'--'},
                    "growth":{"number":'--',"day":'--',"week":'--'},
                    "cumulative":{"number":'--',"day":'--',"week":'--'}
                },
                chartColumn: null,
                new_chart: [],
                cancel_chart: [],
                days: [],
                type: ['关注数', '取消数', '净增关注',  '累计关注']
            };
        },
        methods: {
            closeDialog: function () {
//                console.log(11);
                this.stateManager.StatisticsDialogVisible = false;
                this.stateManager.StatisticsModelId = 0
            },
            drawNewChart(data, time) {
                let self = this;
                this.chartColumn = echarts.init(document.getElementById('chartColumn'));
                this.chartColumn.setOption({
                    title: {
                        text: ''
                    },
                    legend: {
                        data: self.type,
                        align: 'left'
                    },
                    toolbox: {
                        // y: 'bottom',

                    },
                    tooltip: {},
                    xAxis: {
                        data: time,
                        silent: false,
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                    },
                    series: data,
                    animationEasing: 'elasticOut',
                    animationDelayUpdate: function (idx) {
                        return idx * 5;
                    }
                });
            },

            getOption() {
                let self = this;
                axios.post('wechat/statistics', {
                    'w_id': this.stateManager.StatisticsModelId
                }).then(function (response) {
                    let res = response.data;
                    console.log(res.data);
                    self.drawNewChart(res.data, res.time)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getElement() {
                let self = this;
                axios.post('wechat/elements', {
                    'w_id': this.stateManager.StatisticsModelId
                }).then(function (response) {
                    let res = response.data;
                    console.log(res.data);
                    self.dataElement = res
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        computed: {
            modalTitle: function () {
                return '统计数据';
            },

        },
        watch: {
            'stateManager.StatisticsModelId': function (newValue) {
                this.getOption();
                this.getElement();
            }
        }
    }
</script>